<template>
  <div class="regiter">
    <login-top middleTop="登录bilibili">
      <div
        slot="right"
        style="font-size:3.333vw;justify-content: flex-end;"
        @click="$router.push('/regiter')"
      >
        注册
      </div></login-top
    >
    <transition name="fade">
      <div :key="model.username" class="enlarge" v-show="true">
        {{ model.username | trim }}
      </div>
    </transition>
    <login-text
      label="账号"
      placeholder="请输入账号"
      type="text"
      rule="^[A-Za-z0-9]{6,16}$"
      @inputChange="(val)=>{model.username=val}"
    />
    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password"
      rule="^[A-Za-z0-9]{6,16}$"
      @inputChange="(val)=>{model.password=val}"
    />
    
    <login-btn btntext="登录" @regiterSubmit="AjaxInsert"></login-btn>
  </div>
</template>

<script>
import LoginTop from "../components/common/LoginTop";
import LoginText from "../components/common/LoginText";
import LoginBtn from "../components/common/LoginBtn";

export default {
  filters: {
    trim: function(value) {
      if (!value) return "";
      return String(value)
        .split("")
        .map((item) => item.trim())
        .join("");
    },
  },
  data() {
    return {
      model: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async AjaxInsert() {
      let rule=/^[A-Za-z0-9]{6,16}$/
      if (rule.test(this.model.username) && rule.test(this.model.password)) {
        // 格式正确
        const res = await this.$http.post("/login", this.model);
        this.$toast(res.data.msg);
        //
        if (res.data.code == 301 || res.data.code == 302) {
          return;
        }
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("id", res.data.id);
        setTimeout(() => {
          this.$router.push("/userinfo");
        }, 500);
      } else {
        this.$toast.fail("格式不正确，请重新输入");
      }
    },
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn,
  },
  
};
</script>

<style>
.enlarge{
  height: 30px;
  font-size: 30px;
  margin-left: 100px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
